
import { getViewer } from './ViewerCache'
import { getWindowCoordinates } from './util'

let isAddStyle = false;
var style = document.createElement('style');



/**
 * 右键菜单对象
 * @param {simpleMap} parent 地图实例化对象
 * @class RightMenu
 */
class RightMenu {
    constructor(parent) {
        if (!isAddStyle) {
            document.head.appendChild(style);
            style.innerHTML = `
.simpleMapRightClickMenu { color:#EEE; text-align:center; background-color:rgba(0,0,0,0.7); border-radius:5px;overflow: hidden; }
.simpleMapRightClickMenuItem { padding:5px 15px; cursor: pointer; }
.simpleMapRightClickMenuItem:hover { background-color:rgba(0,0,0,0.7) }
            `;
            isAddStyle = true;
        }

        this.parent = parent;
        this.simpleId = parent.simpleId;
        this.doc = null;
        this.status = false;
        this.menuOptions = [];


        this._show = (position) => this.show(position);
        this._clear = () => this.clear();
        this._moveEvent = () => this.moveEvent();

        this.parent.on('RightClick', this._show, this);
        this.parent.on('Click', this._clear, this);
        this.parent.on('DBLClick', this._clear, this);

    }

    /**
     * 注销右键菜单
     *
     * @memberof RightMenu
     */
    destroy() {
        this.isAddStyle = false;
        this.parent.off('RightClick', this._show);
        this.parent.off('Click', this._clear);
        this.parent.off('DBLClick', this._clear);
    }

    /**
     * 渲染右键菜单HTML
     *
     * @param {Object} position 经纬度坐标点信息
     * @memberof RightMenu
     */
    renderHtml(position) {
        var dom = document.createElement('div');
        dom.style.position = 'absolute';
        dom.className = 'simpleMapRightClickMenu'
        if (this.menuOptions.length) {
            for (let i = 0; i < this.menuOptions.length; i++) {
                const element = this.menuOptions[i];
                var itemDom = document.createElement('div');
                itemDom.className = 'simpleMapRightClickMenuItem';
                itemDom.innerHTML = element.name;
                itemDom.onclick = () => {
                    var position = dom.__position;
                    element.event(position);
                    this.clear();
                };
                dom.appendChild(itemDom);
            }
            dom.__position = {
                latitude: position.latitude,
                longitude: position.longitude,
            }
            this.doc = dom;
        }
    }

    /**
     * 移动绑定事件
     *
     * @memberof RightMenu
     */
    moveEvent() {
        var position = getWindowCoordinates(this.doc.__position, this.simpleId);
        this.doc.style.top = position.y + 'px';
        this.doc.style.left = position.x + 'px';
    }

    /**
     * 添加右键菜单配置属性
     *
     * @param {Array} array 菜单配置参数
     * @memberof RightMenu
     * @example 
     * 
     * RightMenu.addMenuOptions([{
     *      name: '按钮1', 
     *      event: (po) => {
     *          // do something
     *      }
     * },{
     *      name: '按钮2', 
     *      event: (po) => {
     *          // do something
     *      }
     * }])
     *  
     */
    addMenuOptions(array) {
        this.clear();
        this.menuOptions = array;
    }

    /**
     * 清除右键菜单属性
     *
     * @memberof RightMenu
     */
    clearMenuOptions() {
        this.clear();
        this.menuOptions = [];
    }

    /**
     * 显示菜单
     *
     * @param {Object} position 经纬度坐标
     * @memberof RightMenu
     */
    show(position) {
        var viewer = getViewer(this.simpleId);
        this.clear();
        this.renderHtml(position);
        if (this.doc) {
            viewer.container.appendChild(this.doc);
            this.parent.on('Tick', this._moveEvent, this);
        };
    }

    /**
     * 清除右键菜单
     *
     * @memberof RightMenu
     */
    clear() {
        if (this.doc) {
            this.parent.off('Tick', this._moveEvent);
            this.doc.remove();
            this.doc = null;
        }
    }

    /**
     * 改变菜单样式
     *
     * @param {StyleString} code
     * @memberof RightMenu
     */
    changeStyle(code) {
        style.innerHTML = code;
    }
}

export default RightMenu;